<template>
    <div>
        <panle title='评论列表' content="评论列表"></panle>
        <!--标签-->
        <div>
            <el-page-header @back="goBack" content="评论列表">
            </el-page-header>
            <!-- <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="" name="first"> -->
            <div class="first_content">
                <!--筛选条件-->
                <div class="shaixuan">
                    <div>
                        <el-input placeholder="搜索关键词" v-model="searchinput" class="input-with-select">
                            <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
                        </el-input>
                    </div>
                    <el-button class="addshuziren_btn" type="danger" round @click="createdYanjinci">+评论列表</el-button>
                </div>
                <div class="first_table">
                    <el-row>
                        <el-col :span="24">
                            <div class="yixuan">已选 {{ multipleSelectioncount }} <el-button @click="piliangshanchu"
                                    type="text">批量删除</el-button></div>
                        </el-col>
                    </el-row>
                    <el-table :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe
                        default-expand-all v-loading="loading" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="55"></el-table-column>
                        <el-table-column prop="id" label="ID" width="55"></el-table-column>
                        <el-table-column prop="touxiang_img" label="头像">
                            <template slot-scope="scope">
                                <el-image :src="scope.row.touxiang_img" fit="fill"
                                    style="width: 60px;height: 60px;"></el-image>
                            </template>
                        </el-table-column>
                        <el-table-column prop="nick" label="昵称"></el-table-column>
                        <el-table-column prop="pinglun" label="评论"></el-table-column>
                        <el-table-column prop="fasong_time" label="发送时间"></el-table-column>
                        <el-table-column prop="createtime" label="创建时间"></el-table-column>
                        <el-table-column prop="id" label="操作">
                            <template slot-scope="scope">
                                <PersButton type="text" size="mini" label="编辑" icon="fa  fa-pencil"
                                    perms="live:comment:edit" @click="edit(scope.row)"></PersButton>
                                <PersButton type="text" size="mini" icon="el-icon-delete" perms="live:comment:del"
                                    label="删除" @click="del(scope.row)"></PersButton>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div class="block">
                        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                            :current-page="pageNumber" :page-sizes="[10, 50, 100, 200]" :page-size="pageSize" background
                            layout="total, sizes, prev, pager, next, jumper" :total="total">
                        </el-pagination>
                    </div>
                </div>
                <!--弹出层  添加数字人-->
                <el-dialog v-dialogDrag :visible.sync="open" width="600px" @close="dialogclose" append-to-body
                    :title="!form.id ? '创建评论' : '编辑评论'">
                    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="头像" prop="touxiang_img">
                                    <div class="uploadcol">
                                        <div class="uploadborder">
                                            <img v-if="bg_url" :src="bg_url" width="100%" height="100%" />
                                            <img v-else src="@/assets/img/uploadimg.jpg" width="100%" height="100%" />

                                        </div>
                                        <el-button type="primary" @click="openUploadDialBg()" size="mini"
                                            style="margin-top:10px">上传头像</el-button>
                                    </div>
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="昵称" prop="nick">
                                    <el-input style="width:50%" v-model="form.nick" placeholder="请输入昵称" size="small" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="24">
                                <el-form-item label="评论" prop="pinglun">
                                    <el-input style="width:50%" v-model="form.pinglun" placeholder="请输入评论"
                                        size="small" />
                                </el-form-item>
                            </el-col>

                            <el-col :span="24">
                                <el-form-item label="发送时间" prop="fasong_time">
                                    <el-time-picker v-model="form.fasong_time" format="HH:mm:ss"
                                        value-format="HH:mm:ss" placeholder="选择时间">
                                    </el-time-picker>

                                    <!-- <el-date-picker v-model="form.fasong_time" format="yyyy-MM-dd HH:mm:ss"
                                        value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
                                        placeholder="请选择发送开始时间"></el-date-picker> -->
                                </el-form-item>
                            </el-col>

                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="open = false" size="small">取 消</el-button>
                        <el-button type="primary" @click="!form.id ? submitForm('form') : subEditForm('form')"
                            size="small">确
                            定</el-button>
                    </div>

                </el-dialog>
                <select-img :show="isShowBgPicDiag" @update="cleanBgDiaglog" :selectType="bgPicDiagNUm"
                    @selectSure="selectBgImgs" :type="0"></select-img>
            </div>
            <!-- </el-tab-pane>
            </el-tabs> -->
        </div>
    </div>
</template>

<script>
import Panle from '@/components/Panle';
import PersButton from '@/components/PersButton';
import { getdata, createPingluninfo, delPingluninfo, editPingluninfo, pldelPingluninfo } from '@/api/live/commentGroup';
import SelectImg from '@/components/select-img';

export default {
    name: 'commentGroupList',
    components: {
        Panle,
        PersButton,
        SelectImg
    },
    data() {
        return {
            groupid: '',
            loading: false,
            tableData: [],
            multipleSelectioncount: 0,
            multipleSelection: [],
            pageSize: 10, //一页显示多少条
            pageNumber: 1,
            total: 0, //总页数
            searchinput: '',
            fileList2: [],
            flagid2: '',
            filelist: [],
            dialogVisible: false,
            disabled: false,
            activeName: 'first',
            open: false,
            bg_url: '',
            form: {
                "id": '',
                "groupid": '',
                "touxiang_img": "",
                "nick": '',
                "pinglun": '',
                "fasong_time": '',
            },
            rules: {

                nick: [{
                    required: true,
                    message: "昵称不能为空",
                    trigger: "blur"
                }],
                pinglun: [{
                    required: true,
                    message: "评论不能为空",
                    trigger: "blur"
                }],
            },

            clickType: false,
            imgnum: 1, //选择图片数量
            isShowBgPicDiag: false,
            bgPicDiagNUm: 1,
        }
    },
    created() {
        // 或者通过$route获取参数
        this.groupid = this.$route.query.id;
        this.init2();
    },
    methods: {
        goBack() {
            this.$router.push({ path: '/live/commentgroup' });
        },
        handleClick(tab, event) {
            console.log(tab, event);
        },
        init2: function () {
            this.loading = true;
            let _param = {
                "size": this.pageSize,
                "page": this.pageNumber,
                "groupid": this.groupid,
                "input": this.searchinput,
            }
            console.log("groupid===>", _param);
            getdata(_param).then((res) => {
                this.tableData = res.data.list;
                this.total = res.data.total;
                this.loading = false;
            })
        },
        search: function () {
            this.searchinput = this.searchinput;
            this.init2();
        },
        handleSizeChange: function (e) {
            this.pageSize = e;
            this.init2();
        },
        handleCurrentChange: function (e) {
            this.pageNumber = e;
            this.init2();
        },
        //已选
        handleSelectionChange: function (e) {
            let selectChang = []
            for (let item of e) {
                selectChang.push(item.id)

            }
            this.multipleSelection = selectChang;
            this.multipleSelectioncount = selectChang.length;
        },
        //创建表单
        createdYanjinci: function (e) {
            this.form = {
                "id": '',
                "groupid": this.groupid,
                "touxiang_img": "",
                "nick": '',
                "pinglun": '',
                "fasong_time": '',
            },
                this.open = true;
        },
        //提交表单  创建 
        submitForm: function (e) {
            this.form.touxiang_img = this.bg_url;
            createPingluninfo(this.form).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.open = false;
                } else {
                    this.msgError(res.msg);
                }
            })


        },
        subEditForm: function (e) {
            this.form.touxiang_img = this.bg_url;
            editPingluninfo(this.form).then((res) => {
                if (res.code == 200) {
                    this.msgSuccess(res.msg);
                    this.init2();
                    this.open = false;
                } else {
                    this.msgError(res.msg);
                }
            })
        },

        del: function (data) {
            this.$confirm('确定删除【' + data.name + '】数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'id': data.id
                }
                delPingluninfo(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        edit: function (data) {

            this.form.id = data.id;
            this.bg_url = data.touxiang_img;
            let editForm = {
                "id": data.id,
                "nick": data.nick,
                "pinglun": data.pinglun,
                "touxiang_img": data.touxiang_img,
                "fasong_time": data.fasong_time,
            }
            Object.assign(this.form, editForm);
            this.open = true;
        },
        //批量删除
        piliangshanchu: function (e) {
            this.$confirm('确定批量删除选中的数字人类型吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                let _param = {
                    'ids': this.multipleSelection
                }
                pldelPingluninfo(_param).then((res) => {
                    if (res.code == 200) {
                        this.msgSuccess(res.msg);
                        this.init2();
                    } else {
                        this.msgError(res.msg);
                    }
                })


            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        cleanBgDiaglog: function (shows) {
            this.isShowBgPicDiag = false;
        },

        openUploadDialBg: function () {
            this.isShowBgPicDiag = true;
        },
        selectBgImgs: function (res) {

            this.isShowBgPicDiag = true;
            this.bg_url = res[0].urls
        },
        //监听关闭弹窗
        dialogclose: function (e) {
            this.filelist = [];
            this.form = {
                "id": '',
                "touxiang_img": '',
                "nick": "",
                "fasong_time": '',
                "pinglun": ''
            };
        },

    }
}

</script>

<style lang="scss" scoped>
@import "@/assets/css/common.scss";

.el-select .el-input {
    width: 130px;
}

.input-with-select .el-input-group__prepend {
    background-color: #fff;
}

.shaixuan {
    display: flex;
    flex-flow: nowrap;
    align-content: center;
    margin-top: 15px;
}

.first_content {
    display: flex;
    flex-flow: nowrap;
    flex-direction: column;
    align-content: center;
}

.uploadcol {
    display: flex;
    flex-flow: column;
    width: 100px;
}

.uploadborder {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    /* cursor: pointer;
      position: relative;
      overflow: hidden; */
    width: 100px;
    height: 100px;
}

.addshuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 20px;
}

.daorushuziren_btn {
    position: absolute;
    right: 0;
    margin-right: 160px;
}

.yixuan {
    margin: 20px;
    color: #787878;
}
</style>